<template>
  <div class="chapterRemarks">
    <!-- 问卷基础项编辑组件 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :before-close="closeDailog"
      :close-on-click-modal="false"
    >
      <FormContainer :column="1">
        <el-form ref="formData" :model="formData" :rules="formRules">
          <el-form-item prop="content" label-width="0">
            <el-input v-model="formData.content" type="textarea" tip :maxlength="500" :autosize="{minRows: 5}" />
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" @click="confrim">确定</Button>
      </span>
    </el-dialog>
    <Button type="primary" @click="dialogVisible=true">{{ text }}</Button>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
export default {
  name: 'ChapterRemarks',
  components: {
    FormContainer,
    Button
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: '备注'
    },
    title: {
      type: String,
      default: '备注'
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formData: {
        content: ''
      },
      formRules: {
        content: [
          {
            required: true,
            message: '请输入编辑内容',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    value: {
      handler(nValue) {
        this.formData.content = nValue
      },
      immediate: true
    }
  },
  methods: {
    closeDailog() {
      this.$refs.formData.resetFields()
      this.dialogVisible = false
    },
    // 确定
    confrim() {
      return this.$refs.formData.validate().then(() => {
        this.$emit('confrimFunc', this.formData.content)
        this.dialogVisible = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
